@include('admin._include.header')
<style>
    .layui-card-header{
        font-size: 16px;
        color: #666;
    }
    .layui-card-header i{
        font-size:20px;
    }
    .layui-form-item .layui-input-inline{
        width: 290px;
    }
    .layui-card-body img{
        width: 100px;
        height: 100px;
        display: block;
        border-radius: 10px;
        float: left;
    }
    .layui-card-body p{
        margin-left: 20%;
        width: 75%;
        line-height: 35px;
        text-indent: 30px;
    }
    .plugin_install{
        color: #5AA5FB;
        line-height: 60px;
    }
    .plugin_install:hover{
        color: #1AB5FB;
    }
    .version{
        color: #333;
        font-size: 18px;
        font-weight: 500;
        margin-right: 10px;
    }
    .layui-card-body{
        height: 125px;
    }
</style>

<body style="background: #fff">

    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15">

            @foreach($model as $item)
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"> <span class="version">v{{$item->version}}</span> {{$item->plugin_name}}
                        <i class="layui-icon layui-icon-about sub" data-content="{{$item->description}}"></i>
                    </div>
                    <div class="layui-card-body">
                        <img src="{{$item->logo}}" alt="">
                        <p>{{$item->pay_description}}</p>
                        <div class="clear"></div>
                    </div>
                    <p style="text-align: right;  width: 95%;">
                        @if($item->status)
                            <a href="javascript:;" data-url="{{url('plugin/edit')}}?id={{$item->id}}" class="plugin_install plugin_edit">编辑</a> |
                            <a href="javascript:;" onclick="window.open('{{url($item->url)}}')" class="plugin_install">管理设置</a>
                        @else
                            <a href="javascript:;" class="plugin_install installNow" data-code="{{$item->code}}">立即安装</a>
                        @endif
                    </p>

                </div>
            </div>
            @endforeach

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">更多插件</div>
                    <div class="layui-card-body">
                        <img src="{{asset('images/plugin_more.png')}}" alt="">
                        <p>更多插件，敬请期待。。。</p>
                        <div class="clear"></div>
                    </div>
                    <p style="height: 64px"></p>
                </div>
            </div>

        </div>
    </div>


<script>

    layui.config({
        base: "/plugin/layuiadmin/" //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form'], function(){
        var $ = layui.jquery;

        var subtips;

        $(".sub").hover(function() {
            openMsg($(this));
        }, function() {
            layer.close(subtips);
        });

        function openMsg(that) {
            subtips = layer.tips(that.data('content'), that,{tips:[1,'#ff6700'],time: 30000});
        }

        $('.plugin_edit').on('click', function () {
            var index = layer.open({
                title: '编辑',
                type: 2,
                area: ['760px', '550px'],
                content:$(this).data('url'),
                end: function() {
                    layui.cache.layerIndex = null;
                    location.reload();
                }
            });
        });

        $('.installNow').on('click', function () {
            var index = layer.load(1);
            var code = $(this).data('code');

            $.ajax({
                url:"{{url('plugin/install')}}",
                dateType:'json',
                data:{
                    'code':code
                },
                type:'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success:function (res) {
                    layer.close(index);
                    layer.msg(res.message);
                    if(res.status === SUCCESS){
                        location.reload();
                    }
                }
            });

            return false;
        })

    });
</script>

</body>
@include('admin._include.footer')